<template>
  <div class="log-management" id="Act">
    <!-- 过滤栏 -->
    <div class="filter-bar">
      <el-input placeholder="请输入系统模块" v-model="searchModule" style="width: 200px; margin-right: 10px;"></el-input>
      <el-input placeholder="请输入操作人员" v-model="searchOperator" style="width: 200px; margin-right: 10px;"></el-input>
      <el-select v-model="searchType" placeholder="操作类型" style="width: 150px; margin-right: 10px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="新增" value="新增"></el-option>
        <el-option label="修改" value="修改"></el-option>
        <el-option label="删除" value="删除"></el-option>
      </el-select>
      <el-select v-model="searchStatus" placeholder="操作状态" style="width: 150px; margin-right: 10px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="成功" value="成功"></el-option>
        <el-option label="失败" value="失败"></el-option>
      </el-select>
      <el-date-picker
        v-model="searchDate"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 300px; margin-right: 10px;"
      ></el-date-picker>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="danger" @click="deleteLogs">删除</el-button>
      <el-button type="warning" @click="emptyLogs">清空</el-button>
      <el-button type="success" @click="exportLogs">导出</el-button>
    </div>
    
    <!-- 日志列表表格 -->
    <el-table :data="logs" style="width: 100%;">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="日志编号" width="80"></el-table-column>
      <el-table-column prop="module" label="系统模块" width="150"></el-table-column>
      <el-table-column prop="type" label="操作类型" width="100"></el-table-column>
      <el-table-column prop="method" label="请求方式" width="100"></el-table-column>
      <el-table-column prop="operator" label="操作人员" width="100"></el-table-column>
      <el-table-column prop="host" label="主机" width="150"></el-table-column>
      <el-table-column prop="location" label="操作地点" width="150"></el-table-column>
      <el-table-column prop="status" label="操作状态" width="100"></el-table-column>
      <el-table-column prop="date" label="操作日期" width="180"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewLog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页控制 -->
    <div class="pagination">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalLogs">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name:'act',
  data() {
    return {
      searchModule: '',
      searchOperator: '',
      searchType: '',
      searchStatus: '',
      searchDate: [],
      logs: [
        // 示例数据
        { id: 5187, module: '菜单管理', type: '新增', method: 'POST', operator: 'admin', host: '0:0:0:0:0:0:0:1', location: '内网IP', status: '成功', date: '2024-12-19 16:01:11' },
        { id: 5186, module: '菜单管理', type: '新增', method: 'POST', operator: 'admin', host: '0:0:0:0:0:0:0:1', location: '内网IP', status: '成功', date: '2024-12-19 16:00:09' },
        // 更多日志...
      ],
      currentPage: 1,
      pageSize: 10,
      totalLogs: 53
    };
  },
  methods: {
    search() {
      // 搜索逻辑
      console.log('搜索:', this.searchModule, this.searchOperator, this.searchType, this.searchStatus, this.searchDate);
    },
    reset() {
      this.searchModule = '';
      this.searchOperator = '';
      this.searchType = '';
      this.searchStatus = '';
      this.searchDate = [];
    },
    deleteLogs() {
      // 删除选中日志
      console.log('删除选中日志');
    },
    emptyLogs() {
      // 清空所有日志
      console.log('清空所有日志');
    },
    exportLogs() {
      // 导出日志
      console.log('导出日志');
    },
    viewLog(row) {
      // 查看日志详情
      console.log('查看日志:', row);
    },
    handlePageChange(page) {
      this.currentPage = page;
      // 加载新页的数据
      console.log('切换到第', page, '页');
    }
  }
};
</script>

<style scoped>
.log-management {
  padding: 20px;
}
.filter-bar {
  margin-bottom: 20px;
}
.action-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
}
</style>